<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;

            /* 
                animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束时的状态

                注意animation的简写形式中是不包含animation-play-state的，因为这个属性经常要配合:hover以及其他事件使用，不适合放在里面。

                注意顺序虽然不是很固定，但是也要注意一下。最好动画名称写在最前面，而且持续时间一定要写在何时开始的前面，因为这两个都是时间单位，顺序错了会出问题的。
            */
            animation: move 2s infinite alternate linear;
        }
        @keyframes move{
            0%{

            }

            100%{
                transform: translate(1000px,0);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>